<style scoped>
.app-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  min-height: calc(100vh - 84px);
}

/* 卡片样式优化 */
.el-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.el-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 卡片标题样式 */
.el-card__header {
  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
  color: white;
  font-weight: 600;
  font-size: 16px;
  border-radius: 12px 12px 0 0 !important;
  padding: 15px 20px;
  border: none;
}

.el-card__header span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 折叠面板样式优化 */
.el-collapse {
  border: none;
  border-radius: 8px;
}

.el-collapse-item__header {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
  border-radius: 6px;
  margin: 4px 0;
  padding: 12px 16px;
  font-weight: 600;
  color: #409EFF;
  border: 1px solid #e1f0ff;
}

.el-collapse-item__header.is-active {
  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
  color: white;
  border-bottom-color: transparent;
}

.el-collapse-item__content {
  padding: 16px;
  background: #fafcff;
  border-radius: 0 0 6px 6px;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.el-table::before {
  display: none;
}

.el-table th {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
  color: #409EFF;
  font-weight: 600;
  border: none;
}

.el-table td {
  border-bottom: 1px solid #f0f7ff;
}

.el-table .el-table__row:hover td {
  background-color: #f0f7ff !important;
}

/* 描述列表样式 */
.el-descriptions {
  margin-top: 10px;
}

.el-descriptions__label {
  background: #f8f9fa;
  font-weight: 500;
  color: #606266;
}

.el-descriptions__content {
  color: #303133;
  font-weight: 500;
}

/* 图表容器样式 */
.chart-container {
  position: relative;
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

/* 布局间距优化 */
.mgb20 {
  margin-bottom: 20px;
}

.el-row {
  margin: 0 -8px;
}

.el-col {
  padding: 0 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .el-col-6 {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .el-col-12 {
    width: 100%;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 数据状态指示器 */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-normal {
  background: #67C23A;
}

.status-warning {
  background: #E6A23C;
}

.status-error {
  background: #F56C6C;
}

/* 加载动画 */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>

<template>
  <div class="app-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="16" style="margin-bottom: 20px;">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value" id="deviceTotal">{{ deviceTotal }}</div>
            <div class="stat-label">设备总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value" style="color: green;" id="deviceZc">{{deviceZc}}</div>
            <div class="stat-label">正常运行</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-value" style="color: red;" id="deviceGj">{{deviceGj}}</div>
            <div class="stat-label">告警设备</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16">
      <!-- 左侧图表区域 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="6">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-data-analysis"></i>
              <span>回流占比分析</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="lineData42" style="height: 240px;" v-if="hlShow" />
            <div v-else style="height: 240px; display: flex; align-items: center; justify-content: center; color: #909399;">
              <el-empty description="暂无回流数据" :image-size="80" />
            </div>
          </div>
        </el-card>
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-trend-charts"></i>
              <span>故障统计</span>
              <el-tag size="mini" style="margin-left: 8px;">近30天</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div id="lineData21" style="height: 300px;" />
          </div>
        </el-card>
      </el-col>

      <!-- 中间实时数据区域 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="12">
        <el-card class="real-time-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-data-line"></i>
              <span>实时数据监控</span>
              <div style="flex: 1;"></div>
              <el-tag type="success" size="small">实时更新</el-tag>
            </div>
          </template>
          
          <div style="max-height: 800px; overflow-y: auto; padding: 8px;">
            <!-- 动态类型数据 -->
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item 
                v-for="item in typeVOS" 
                :key="item.id" 
                :title="item.name" 
                :name="'type_' + item.id"
              >
                <el-table 
                  :data="tableData" 
                  @row-click="clickRow" 
                  style="width: 100%"
                  v-loading="!tableData.length"
                  empty-text="暂无实时数据"
                >
                  <el-table-column prop="deviceId" label="数据标识" width="180" v-if="false"></el-table-column>
                  <el-table-column prop="deviceName" label="设备" width="180">
                    <template #default="{row}">
                      <span class="status-indicator" :class="getStatusClass(row.status)"></span>
                      {{ row.deviceName }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="数值" width="180">
                    <template #default="{row}">
                      <span class="data-value">{{ row.value }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ts" label="采集时间" width="180">
                    <template #default="{row}">
                      <el-tag size="small" effect="plain">{{ formatTime(row.ts) }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template #default="{row}">
                      <dict-tag 
                        :options="dict.type.device_status" 
                        :value="row.status" 
                        :type="getStatusTagType(row.status)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>

            <!-- 磁芯电流 -->
            <el-collapse v-model="activeNames">
              <el-collapse-item title="磁芯电流监测" name="cx">
                <el-table :data="cxtableData" @row-click="clickRow" style="width: 100%">
                  <el-table-column 
                    v-for="(item, index) in cxNames" 
                    :key="index"
                    :prop="'dl' + (index + 1)"
                    :label="item"
                  >
                    <template #default="{row}">
                      <span class="current-value">{{ row['dl' + (index + 1)] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ts" label="采集时间" width="180px">
                    <template #default="{row}">
                      <el-tag size="small" effect="plain">{{ formatTime(row.ts) }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deviceId" label="数据标识" width="180" v-if="false"></el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>

            <!-- 回流电流 -->
            <el-collapse v-model="activeNames">
              <el-collapse-item title="回流电流监测" name="hl">
                <el-table :data="hltableData" @row-click="clickRow" style="width: 100%">
                  <el-table-column 
                    v-for="(item, index) in hlNames" 
                    :key="index"
                    :prop="'dl' + (index + 1)"
                    :label="item"
                  >
                    <template #default="{row}">
                      <span class="current-value">{{ row['dl' + (index + 1)] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ts" label="采集时间" width="180px">
                    <template #default="{row}">
                      <el-tag size="small" effect="plain">{{ formatTime(row.ts) }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deviceId" label="数据标识" width="180" v-if="false"></el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧信息区域 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="6">
        <el-card class="info-card mgb20">
          <template #header>
            <div class="card-header">
              <i class="el-icon-info"></i>
              <span>设备信息</span>
            </div>
          </template>
          <div class="info-content">
            <el-descriptions :column="1" border size="medium">
              <el-descriptions-item label="设备类别">
                <el-tag type="primary">{{ device.typeName || '-' }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="设备名称">
                {{ device.deviceName || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="设备编码">
                <el-text type="info">{{ device.deviceCode || '-' }}</el-text>
              </el-descriptions-item>
              <el-descriptions-item v-if="!isShow" label="地址">
                {{ device.dzw || '-' }}
              </el-descriptions-item>
              <el-descriptions-item v-if="isShow" label="主测点">
                {{ device.zdzw || '-' }}
              </el-descriptions-item>
              <el-descriptions-item v-if="isShow" label="从测点">
                {{ device.cdwz || '-' }}
              </el-descriptions-item>
              <el-descriptions-item v-if="isDzl" label="地桩距">
                {{ device.dzj || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="设置频率">
                {{ device.frequency || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="设置电流">
                {{ device.electricity || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="设备状态">
                <dict-tag 
                  :options="dict.type.device_status" 
                  :value="device.deviceStatus" 
                  :type="getStatusTagType(device.deviceStatus)"
                />
              </el-descriptions-item>
            </el-descriptions>

            <el-divider content-position="left">详细参数</el-divider>
            
            <el-table :data="infotableData" size="small" v-loading="!infotableData.length">
              <el-table-column prop="address" label="地址" width="100"></el-table-column>
              <el-table-column prop="dzl" v-if="isDzl" label="电阻率"></el-table-column>
              <el-table-column prop="dz" label="电阻"></el-table-column>
              <el-table-column prop="dy" label="电压"></el-table-column>
              <el-table-column prop="dl" label="电流"></el-table-column>
              <el-table-column prop="pl" label="频率"></el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card class="chart-card mgb20">
          <template #header>
            <div class="card-header">
              <i class="el-icon-history"></i>
              <span>历史数据趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div id="lineData41" style="height: 240px;" />
          </div>
        </el-card>

        
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getDevice, hisData,getDeviceStatus } from "@/api/device/device";

// 注意，以下写法固定，不能写错
import * as echarts from "echarts";
var ws = null;
export default {
  name: "Index",
  dicts: ['device_alarm_type', 'device_status', 'device_z_c'],
  data() {
    return {
      mychart21: null,
      mychart41: null,
      mychart42: null,
      optionline21: {},
      optionline41: {},
      optionline42: {},
      wsUrl: '',
      datas: null,
      ztPie: null,
      lbLine: null,
      tableData: [],
      cxtableData: [],
      hltableData: [],
      infotableData: [],
      device: {},
      legendLine41: [],
      xLine41: [],
      seriesLine41: [],
      activeNames: ['1'],
      htmlContent: '',
      typeVOS: [],
      cxData: null,
      hlData: null,
      hlMax: 0,
      cxMax: 0,
      isShow: false,
      rightDeviceId: null,
      dlunit: "A",
      cxNames: [],
      hlNames: [],
      hlPie: null,
      activeName: 'first',
      hlShow: true,
      isDzl: false,
      deviceTotal:0,
      deviceZc:0,
      deviceGj:0,
    };
  },
  created() {
    this.wsUrl = process.env.VUE_APP_WS_URL;

  },
  mounted() {
    this.mychart21 = echarts.init(document.getElementById("lineData21"));
    this.mychart41 = echarts.init(document.getElementById("lineData41"));
    this.mychart42 = echarts.init(document.getElementById("lineData42"));
    // 设置响应式
    window.addEventListener('resize', () => {
      this.mychart21?.resize();
      this.mychart41?.resize();
      this.mychart42?.resize();
    });
    this.wsClient();
  },
  beforeUnmount() {
    // 清理资源
    if (ws) {
      ws.close();
    }
    window.removeEventListener('resize', this.resizeCharts);
  },
  methods: {// 新增辅助方法
    getStatusClass(status) {
      const statusMap = {
        '0': 'status-normal',
        '1': 'status-warning', 
        '2': 'status-error'
      };
      return statusMap[status] || 'status-normal';
    },
    
    getStatusTagType(status) {
      const typeMap = {
        '0': 'success',
        '1': 'warning',
        '2': 'danger'
      };
      return typeMap[status] || 'info';
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '-';
      return this.$dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
    },
    
    getList() {
      getDeviceStatus().then(response => {
        console.log(response.data);
              this.deviceTotal=(response.data.deviceTotal);
              this.deviceZc=(response.data.deviceZc);
              this.deviceGj=(response.data.deviceGj);
            }),
      this.optionline21 = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lbLine.xdata,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.lbLine.seriesData,
            type: 'line'
          }
        ]
      };

      this.optionline41 = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.legendLine41
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xLine41
        },
        yAxis: {
          type: 'value'
        },
        series: this.seriesLine41
      };

      this.optionline42 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '回流占比',
            type: 'pie',
            radius: '50%',
            data: this.hlPie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };



      this.mychart21.setOption(this.optionline21);


      this.mychart41.setOption(this.optionline41);


      this.mychart42.setOption(this.optionline42);
    },
    wsClient() {
      var url = this.wsUrl + "/websocket/message/9998";
      ws = new WebSocket(url);
      ws.onopen = function (event) {
        console.log("已经打开连接");
      }
      ws.onmessage = ((event) => {
        let msg = event.data;

        if (msg.includes("vue_msg")) {
          var jsonObject = JSON.parse(msg);
        } else if (msg.includes("sydata")) {
          var jsonObject = JSON.parse(msg);
          this.datas = jsonObject.datas;
          this.ztPie = jsonObject.ztPie;
          this.lbLine = jsonObject.lbLine;
          let tableList = [];
          let tableObj = {};
          if (null != jsonObject.datas) {
            let allHtml = '';
            this.typeVOS = jsonObject.datas.typeVOS;
            if (undefined != this.typeVOS && null != this.typeVOS && this.typeVOS.length > 0) {
              let num = 1;
              this.typeVOS.forEach(d => {
                let deviceVOS = d.deviceVOS;
                if (undefined != deviceVOS && null != deviceVOS && deviceVOS.length > 0) {
                  deviceVOS.forEach(deviceVO => {
                    tableObj = {};
                    tableObj.deviceId = deviceVO.deviceId;
                    tableObj.deviceName = deviceVO.deviceName;
                    tableObj.value = deviceVO.value + deviceVO.unit;
                    tableObj.ts = deviceVO.ts;
                    tableObj.status = deviceVO.status;
                    tableList.push(tableObj);
                    if (num == 1) {
                      let rowData = {};
                      rowData.deviceId = deviceVO.deviceId;
                      this.clickRow(rowData);
                      num++;
                    }
                  });
                }
                this.activeNames.push("type_" + d.id);
              });
              this.tableData = tableList;

            }
            //磁芯
            if (undefined != jsonObject.datas.cxData) {
              this.cxData = jsonObject.datas.cxData;
              this.cxPack();
            }
            if (undefined != jsonObject.datas.hlData) {
              this.hlData = jsonObject.datas.hlData;
              this.hlPack();
            }
          }
          this.getList();

        } else if (msg.includes("type")) {
          var jsonObject = JSON.parse(msg);
          //磁芯
          if (jsonObject.type == 0) {
            this.cxData = jsonObject;
            this.cxPack();
          }
          //回流
          else if (jsonObject.type == 1) {
            this.hlData = jsonObject;
            this.hlPack();
          }
        } else if (msg.includes("deviceId")) {
          var deviceData = JSON.parse(msg);
          //实时数据更新
          if (null != this.tableData && this.tableData.length > 0) {
            let flag = true;
            this.tableData.forEach(tableObj => {
              if (tableObj.deviceId == deviceData.deviceId) {
                flag = false;
                if (deviceData.dataType == '0') {
                  tableObj.value = deviceData.dz + deviceData.dzUnit;
                } else if (deviceData.dataType == '1') {
                  console.log(deviceData);
                  tableObj.value = deviceData.dzl + deviceData.dzlUnit;
                } else if (deviceData.dataType == '2') {
                  tableObj.value = deviceData.dy + deviceData.dyUnit;
                }
                tableObj.ts = deviceData.ts;
                tableObj.status = deviceData.alarmType;
              }
            });
            if (flag) {
              let tableObj = {};
              tableObj.deviceId = deviceData.deviceId;
              tableObj.deviceName = deviceData.deviceName;
              if (deviceData.dataType == '0') {
                tableObj.value = deviceData.dz + deviceData.dzUnit;
              } else if (deviceData.dataType == '1') {
                tableObj.value = deviceData.dzl + deviceData.dzlUnit;
              } else if (deviceData.dataType == '2') {
                tableObj.value = deviceData.dy + deviceData.dyUnit;
              }
              tableObj.ts = deviceData.ts;
              tableObj.status = deviceData.alarmType;
              this.tableData.push(tableObj);
            }
          }
          //右侧设备信息更新
          if (this.rightDeviceId == deviceData.deviceId) {
            getDevice(this.rightDeviceId).then(response => {
              this.device = response.data;
              if (this.device.isDt == '0') {
                this.isShow = true;
              } else {
                this.isShow = false;
              }
              this.packRightData(response.data);
            });
            hisData(this.rightDeviceId).then(response => {
              if (null != response.data) {
                let optionNew = {
                  legend: {
                    data: response.data.legendData
                  },
                  tooltip: {
                    trigger: 'axis'
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  toolbox: {
                    feature: {
                      saveAsImage: {}
                    }
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: response.data.xdata
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: response.data.series
                };

                this.mychart41.setOption(optionNew, true);
              }
            });
          }
        } else {
          console.log(msg);
        }
      })
      ws.onclose = function (event) {
        console.log("已经关闭连接");
      }
    },
    clickRow(row) {
      if (row.deviceId > 0) {
        this.rightDeviceId = row.deviceId;
        getDevice(row.deviceId).then(response => {
          this.device = response.data;
          if (this.device.isDt == '0') {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.packRightData(response.data);
        });
      }

      hisData(row.deviceId).then(response => {
        if (null != response.data) {
          let optionNew = {
            legend: {
              data: response.data.legendData
            },
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: response.data.xdata
            },
            yAxis: {
              type: 'value'
            },
            series: response.data.series
          };
          console.log(optionNew);
          this.mychart41.setOption(optionNew, true);
        }
      });
      if (row.deviceId == -2) {
        this.hlzb();
      }

    },
    handleChange(val) {
      console.log(val);
    },
    cxPack() {
      this.cxtableData = [];
      this.cxMax = this.cxData.maxDlw;
      this.cxNames = this.cxData.dictData.slice(0, this.cxMax);
      let cxtableObj = {};
      if (this.cxMax >= 1) {
        cxtableObj.dl1 = this.cxData.dl1 + this.dlunit;
      }
      if (this.cxMax >= 2) {
        cxtableObj.dl2 = this.cxData.dl2 + this.dlunit;
      }
      if (this.cxMax >= 3) {
        cxtableObj.dl3 = this.cxData.dl3 + this.dlunit;
      }
      if (this.cxMax >= 4) {
        cxtableObj.dl4 = this.cxData.dl4 + this.dlunit;
      }
      if (this.cxMax >= 5) {
        cxtableObj.dl5 = this.cxData.dl5 + this.dlunit;
      }
      if (this.cxMax >= 6) {
        cxtableObj.dl6 = this.cxData.dl6 + this.dlunit;
      }
      if (this.cxMax >= 7) {
        cxtableObj.dl7 = this.cxData.dl7 + this.dlunit;
      }
      if (this.cxMax >= 8) {
        cxtableObj.dl8 = this.cxData.dl8 + this.dlunit;
      }
      if (this.cxMax >= 9) {
        cxtableObj.dl9 = this.cxData.dl9 + this.dlunit;
      }
      if (this.cxMax >= 10) {
        cxtableObj.dl10 = this.cxData.dl0 + this.dlunit;
      }
      cxtableObj.ts = this.cxData.ts;
      cxtableObj.deviceId = -1;
      this.cxtableData.push(cxtableObj);
      this.activeNames.push("cx");
    },
    hlPack() {
      this.hltableData = [];
      this.hlMax = this.hlData.maxDlw;
      this.hlNames = this.hlData.dictData.slice(0, this.hlMax);
      let hltableObj = {};
      if (this.hlMax >= 1) {
        hltableObj.dl1 = this.hlData.dl1 + this.dlunit;
      }
      if (this.hlMax >= 2) {
        hltableObj.dl2 = this.hlData.dl2 + this.dlunit;
      }
      if (this.hlMax >= 3) {
        hltableObj.dl3 = this.hlData.dl3 + this.dlunit;
      }
      if (this.hlMax >= 4) {
        hltableObj.dl4 = this.hlData.dl4 + this.dlunit;
      }
      if (this.hlMax >= 5) {
        hltableObj.dl5 = this.hlData.dl5 + this.dlunit;
      }
      if (this.hlMax >= 6) {
        hltableObj.dl6 = this.hlData.dl6 + this.dlunit;
      }
      if (this.hlMax >= 7) {
        hltableObj.dl7 = this.hlData.dl7 + this.dlunit;
      }
      if (this.hlMax >= 8) {
        hltableObj.dl8 = this.hlData.dl8 + this.dlunit;
      }
      if (this.hlMax >= 9) {
        hltableObj.dl9 = this.hlData.dl9 + this.dlunit;
      }
      if (this.hlMax >= 10) {
        hltableObj.dl10 = this.hlData.dl0 + this.dlunit;
      }
      if (this.hlMax >= 11) {
        hltableObj.dl11 = this.hlData.dl11 + this.dlunit;
      }
      if (this.hlMax >= 12) {
        hltableObj.dl12 = this.hlData.dl12 + this.dlunit;
      }
      if (this.hlMax >= 13) {
        hltableObj.dl13 = this.hlData.dl13 + this.dlunit;
      }
      if (this.hlMax >= 14) {
        hltableObj.dl14 = this.hlData.dl14 + this.dlunit;
      }
      if (this.hlMax >= 15) {
        hltableObj.dl15 = this.hlData.dl15 + this.dlunit;
      }
      if (this.hlMax >= 16) {
        hltableObj.dl16 = this.hlData.dl16 + this.dlunit;
      }
      hltableObj.ts = this.hlData.ts;
      hltableObj.deviceId = -2;
      this.hltableData.push(hltableObj);
      this.activeNames.push("hl");
      this.hlzb();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    hlzb() {
      let hlPieData = [];
      let hlObj = {};
      if (this.hlMax >= 1) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl1);
        hlObj.name = this.hlNames[0];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 2) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl2);
        hlObj.name = this.hlNames[1];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 3) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl3);
        hlObj.name = this.hlNames[2];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 4) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl4);
        hlObj.name = this.hlNames[3];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 5) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl5);
        hlObj.name = this.hlNames[4];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 6) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl6);
        hlObj.name = this.hlNames[5];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 7) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl7);
        hlObj.name = this.hlNames[6];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 8) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl8);
        hlObj.name = this.hlNames[7];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 9) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl9);
        hlObj.name = this.hlNames[8];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 10) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl10);
        hlObj.name = this.hlNames[9];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 11) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl11);
        hlObj.name = this.hlNames[10];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 12) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl12);
        hlObj.name = this.hlNames[11];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 13) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl13);
        hlObj.name = this.hlNames[12];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 14) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl14);
        hlObj.name = this.hlNames[13];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 15) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl15);
        hlObj.name = this.hlNames[14];
        hlPieData.push(hlObj);
      }
      if (this.hlMax >= 16) {
        hlObj = {};
        hlObj.value = parseFloat(this.hlData.dl16);
        hlObj.name = this.hlNames[15];
        hlPieData.push(hlObj);
      }
      this.hlPie = hlPieData;
      this.optionline42 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '回流占比',
            type: 'pie',
            radius: '50%',
            data: this.hlPie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.mychart42.setOption(this.optionline42);
      window.onresize = this.mychart42.resize();
    },
    packRightData(data) {
      if (data.xsdx == '1') {
        this.isDzl = true;
      } else {
        this.isDzl = false;
      }
      if (undefined != data.dataVos && null != data.dataVos && data.dataVos.length > 0) {
        let tableDatas = [];
        let tableDataObj = {};
        data.dataVos.forEach(vo => {
          tableDataObj = {};
          tableDataObj.address = vo.address;
          tableDataObj.dzl = vo.dzl + vo.dzlUnit;
          tableDataObj.dz = vo.dz + vo.dzUnit;
          tableDataObj.dy = vo.dz + vo.dyUnit;
          tableDataObj.dl = vo.dl + vo.dlUnit;
          tableDataObj.pl = vo.pl + vo.plUnit;
          tableDatas.push(tableDataObj);
        });
        this.infotableData = tableDatas;
      }
    }
  }
};
</script>

<style scoped>
/* 新增样式 */
.stat-card {
  text-align: center;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item {
  position: relative;
  width: 100%;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-icon {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  opacity: 0.3;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-value {
  font-weight: 600;
  color: #409EFF;
}

.current-value {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #67C23A;
}

.info-content {
  padding: 8px;
}

.chart-card {
  height: 400px;
}

.real-time-card {
  height: 800px;
}

.info-card {
  height: auto;
  min-height: 400px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .chart-card,
  .real-time-card,
  .info-card {
    height: auto;
    min-height: 300px;
  }
}
</style>